<template>
  <div>
    <router-view></router-view>
    <div class="werapp1">
      <footer>
        <router-link to="/index" class="footer-item">
          <span class="icon iconfont">&#xe69c;</span>
          <p>首页</p>
        </router-link>
        <router-link to="/course" class="footer-item">
          <span class="icon iconfont">&#xe606;</span>
          <p>课程</p>
        </router-link>
        <router-link to="/record" class="footer-item">
          <span class="icon iconfont">&#xe600;</span>
          <p>约课纪录</p>
        </router-link>
        <router-link to="/practice" class="footer-item">
          <span class="icon iconfont">&#xe623;</span>
          <p>练习</p>
        </router-link>
        <router-link to="/login" class="footer-item">
          <span class="icon iconfont">&#xe654;</span>
          <p>我的</p>
        </router-link>
      </footer>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.werapp1 {
  width: 100%;
  height: 1.433rem;
  // margin-top: 300px;
}
footer {
  display: flex;
  width: 100%;
  height: 1.333rem;
  bottom: 0px;
  background: white;
  position: fixed;
  justify-content: space-around;
  align-items: center;
  .footer-item {
    text-align: center;
    width: 20%;
    color: black;
    p {
      padding: 0;
      margin: 0;
    }
    &:hover {
      color: rgb(253, 97, 3);
    }
  }
}
</style>